<template>
  <div class="libSlide">
    <slot name="course">

    </slot>
    <el-menu text-color="#666"  class="slideMenu" :default-active="activeMenuNum" >
      <el-menu-item @click="clickNav(item.path,index)"  v-for="(item,index) in navList" :index="index+1 +''"  :key="index">
        <i  class='iconfont' :class="item.icon"></i>
        <span>{{item.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"

import {counterStore} from "@/store/modules/counter"
const store=counterStore()
const router=useRouter()
const route=useRoute()

const activeMenuNum=ref(null)
// const libId = window.sessionStorage.getItem("libId")
const navList = ref([
  {
    path: "/userinfo/basicinfo",
    icon: " icon-account",
    title: "基本信息"
  },
  {
    path: "/userinfo/personal",
    icon: " icon-order",
    title: "个人资料"
  },
  {
    path: "/userinfo/password",
    icon: " icon-password",
    title: "修改密码"
  }
  // {
  //   path: "/designclass/sign",
  //   icon: " icon-clock-fill",
  //   title: "签到"
  // }
])
// 点击侧边导航
const clickNav=(path,index)=>{
  router.push({path:path,query:{activeNum:index+1}})
}


onMounted(()=>{
  
  store.activeNum=route.query.activeNum
  activeMenuNum.value=store.activeNum
})



</script>

<style lang="scss" scoped>
@use "@/assets/styles/vars.module" as *;

.libSlide {
  .slideMenu{
    span{ font-size: 16px;}
    .iconfont {
          font-size: 22px; 
          vertical-align: middle;
          
          margin-right: 3px;
        }
}

}

.el-menu {
  border-right: none;
}
</style>
